<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main" />
    <g:set var="entityName" value="${message(code: 'building.label', default: 'Building')}" />
    <title>楼栋详情</title>
    %{--swiper.css--}%
    <asset:stylesheet src="intelligence/swiper.css"/>
    <style type="text/css">

    /*.table thead th.table-bordered th,.table-bordered td{*/
        /*border: 1px solid #85C0FB;*/
    /*}*/
    .table th, .table td{
        vertical-align: middle;
    }
    .table-bordered>tr:hover{
        background: #F7FBFF;
    }
    </style>
</head>gr
<body>
%{--<a href="#show-building" class="skip" tabindex="-1"><g:message code="default.link.skip.label" default="Skip to content&hellip;"/></a>--}%
<div class="main1">
    <div class="width" style="margin: 0 auto;">
        <div class="buildingContent">
            %{--<div class="pull-left buildingContentPage_1" title="${building.buildingName}">${building.buildingName}</div>--}%
            <div class="pull-left buildingContentPage_2" title="${building.buildingaddress}"><asset:image src="detailImage_3.png" class="detailPageImage"/>${building.buildingaddress}</div>
        </div>

        <div class="clearfix"></div>

            <!-- 小区详情信息 -->

            <div class="mainBody">
                <!-- 轮播图 -->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <g:if test="${com.cindata.base.Picture.findAllByAddress(com.cindata.base.Address.findById(this.building?.id))}">
                            <g:each in="${com.cindata.base.Picture.findAllByAddress(com.cindata.base.Address.findById(this.building?.id))}">
                                <div class='swiper-slide'><image src='${it?.url}' class='swiperImg' /></div>
                            </g:each>
                        </g:if>
                        <g:else>
                            <image src='/assets/january.jpg' class='swiperImg' />
                        </g:else>
                        %{--<div class="swiper-slide"><asset:image src="january.jpg" class="swiperImg"/></div>--}%
                        %{--<div class="swiper-slide"><asset:image src="january.jpg" class="swiperImg"/></div>--}%
                        %{--<div class="swiper-slide"><asset:image src="january.jpg" class="swiperImg"/></div>--}%
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination">111</div>

                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>

                </div>
                <!-- 楼哦懂详情信息 -->

                <div class="houseDetailInformation">
                    <div class="detailBox_1 pull-left">
                        <div>楼栋名称：<span class="DetailColor">${this.building?.buildingName?:"--"}</span></div>
                        <div id="houseAddress" title="${this.building?.buildingaddress}">楼栋地址：<span class="DetailColor">${this.building?.buildingaddress?:"--"}</span></div>
                        <div style="margin-top: 68px;">建成年份：<span class="DetailColor">${this.building?.buildyear?:"--"}</span></div>
                        <div>单元数：<span class="DetailColor">${this.building?.unitcount?:"--"}</span></div>
                        <div>地下层数：<span class="DetailColor">${this.building?.underFloor?:"--"}%</span></div>
                        <div>楼东朝向：<span class="DetailColor">${this.building?.aspect?:"--"}</span></div>
                        <div>楼栋门：<span class="DetailColor">${this.building?.buildingentrancedoor?:"--"}</span></div>
                        <div>建筑类别：<span class="DetailColor">${this.building?.buildingtype?:"--"}</span></div>
                        <div>产权性质：<span class="DetailColor">${this.building?.property?:"--"}</span></div>
                    </div>

                    <div class="detailBox_3 pull-left">

                        <div style="margin-top: 112px;">梯户比例：<span class="DetailColor">${this.building?.elevatorHousehold?:"--"}</span></div>
                        <div>总户数：<span class="DetailColor">${this.building?.totalhouseholdcount?:"--"}户</span></div>
                        <div>总层数：<span class="DetailColor">${this.building?.totalfloor?:"--"}层</span></div>
                        <div>地下用途：<span class="DetailColor">${this.building?.underflooruse?:"--"}</span></div>
                        <div style="">建筑布局：<span class="DetailColor">${this.building?.layout?:"--"}</span></div>
                        <div>外墙装修：<span class="DetailColor">暂无数据</span></div>
                        <div>建筑结构：<span class="DetailColor">${this.building?.structure?:"--"}</span></div>
                    </div>

                </div>
            </div>
            <div class="clearfix"></div>

        <!-- 楼盘表 -->
        <div class="houseDealData_1">
            <div class="houseDealContent">
                <ul class="plateData">
                    <li class="everyTitle">楼盘表</li>
                </ul>
            </div>

            <div class="table-responsive">
                <table class="table table-bordered dataTable buildingTableFont">

                </table>
            </div>
        </div>
        <!-- 房屋成交记录 -->
        <div class="houseDealData_1">
            <div class="houseDealContent">
                <ul class="plateData">
                    <li class="everyTitle">交易数据</li>
                    <li class="tabActive houseDealContentActive">二手成交案例</li>
                    <li class="tabActive">一手成交案例</li>
                    <li class="tabActive">挂牌案例</li>
                    <li class="tabActive">法拍案例</li>
                    <li class="tabActive">出租案例</li>
                </ul>
            </div>
            <table class="table table-hover mb-0 dealTable">
                <thead class="tableFontColor">
                <tr>
                    <th>小区名称</th>
                    <th>所在层</th>
                    <th>总楼层</th>
                    <th>朝向</th>
                    <th>建筑面积(㎡)</th>
                    <th>成交单价</th>
                    <th>成交总价</th>
                    <th>成交日期</th>
                </tr>
                </thead>
                <tbody>

                <g:if test="${saleBuildCount2==0}">
                    <tr><td colspan="8">暂无交易记录</td></tr>
                </g:if>
                <g:else>
                    <g:each in="${saleBuildList2}">
                        <tr>
                            <td scope="row">${it[0]}</td>
                            <td scope="row">${it[1]}</td>
                            <td scope="row">${it[2]}</td>
                            <td scope="row">${it[3]}</td>
                            <td scope="row">${it[4]}</td>
                            <td scope="row">${it[5]}</td>
                            <td scope="row">${it[6]}</td>
                            <td scope="row"><g:formatDate date="${it[7]}" format="yyyy-MM-dd"></g:formatDate></td>
                        </tr>
                    </g:each>
                </g:else>

                </tbody>
            </table>
            <table class="table table-hover mb-0 dealTable hide">
                <thead class="tableFontColor">
                <tr>
                    <th>小区名称</th>
                    <th>所在层</th>
                    <th>总楼层</th>
                    <th>朝向</th>
                    <th>建筑面积(㎡)</th>
                    <th>成交单价</th>
                    <th>成交总价</th>
                    <th>成交日期</th>
                </tr>
                </thead>
                <tbody>

                <g:if test="${saleBuildCount1==0}">
                    <tr><td colspan="8">暂无交易记录</td></tr>
                </g:if>
                <g:else>
                    <g:each in="${saleBuildList1}">
                        <tr>
                            <td scope="row">${it[0]}</td>
                            <td scope="row">${it[1]}</td>
                            <td scope="row">${it[2]}</td>
                            <td scope="row">${it[3]}</td>
                            <td scope="row">${it[4]}</td>
                            <td scope="row">${it[5]}</td>
                            <td scope="row">${it[6]}</td>
                            <td scope="row"><g:formatDate date="${it[7]}" format="yyyy-MM-dd"></g:formatDate></td>
                        </tr>
                    </g:each>
                </g:else>

                </tbody>
            </table>
            <table class="table table-hover mb-0 dealTable hide">
                <thead class="tableFontColor">
                <tr>
                    <th>小区名称</th>
                    <th>所在层</th>
                    <th>总楼层</th>
                    <th>朝向</th>
                    <th>建筑面积（ m2）</th>
                    <th>挂牌单价（元/ m2）</th>
                    <th>挂牌总价</th>

                    <th>挂牌日期</th>
                </tr>
                </thead>
                <tbody>

                <g:if test="${netListingCount==0}">
                    <tr><td colspan="8">暂无交易记录</td></tr>
                </g:if>
                <g:else>
                    <g:each in="${netListingList}">
                        <tr>
                            <td scope="row">${it[0]}</td>
                            <td scope="row">${it[1]}</td>
                            <td scope="row">${it[2]}</td>
                            <td scope="row">${it[3]}</td>
                            <td scope="row">${it[4]}</td>
                            <td scope="row">${it[5]}</td>
                            <td scope="row">${it[6]}</td>
                            <td scope="row"><g:formatDate date="${it[7]}" format="yyyy-MM-dd"></g:formatDate></td>
                        </tr>
                    </g:each>
                </g:else>


                </tbody>
            </table>
            <table class="table table-hover mb-0 dealTable hide">
                <thead class="tableFontColor">
                <tr>
                    <th>小区名称</th>
                    <th>楼层</th>
                    <th>朝向</th>
                    <th>建筑面积㎡</th>
                    <th>法拍次数</th>

                    <th>评估单价（元/ m2）</th>
                    <th>成交单价（元/ m2）</th>
                    <th>成交总价</th>

                    <th>成交日期</th>
                </tr>
                </thead>
                <tbody>

                <g:if test="${foreclosureCount==0}">
                    <tr><td colspan="9">暂无交易记录</td></tr>
                </g:if>
                <g:else>
                    <g:each in="${foreclosureList}">
                        <tr>
                            <td scope="row">${it[0]}</td>
                            <td scope="row">${it[1]}</td>
                            <td scope="row">${it[2]}</td>
                            <td scope="row">${it[3]}</td>
                            <td scope="row">${it[4]}</td>
                            <td scope="row">${it[5]}</td>
                            <td scope="row">${it[6]}</td>
                            <td scope="row">${it[7]}</td>
                            <td scope="row"><g:formatDate date="${it[8]}" format="yyyy-MM-dd"></g:formatDate></td>
                        </tr>
                    </g:each>
                </g:else>


                </tbody>
            </table>
            <table class="table table-hover mb-0 dealTable hide">
            <thead class="tableFontColor">
            <tr>
                <th>小区名称</th>
                <th>所在层</th>
                <th>总楼层</th>
                <th>出租面积㎡</th>
                <th>房型</th>
                <th>出租价格(元/月)</th>
                <th>租赁方式</th>
                <th>装修</th>
                <th>发布日期</th>
            </tr>
            </thead>
            <tbody>

            <g:if test="${rentCount==0}">
                <tr><td colspan="9">暂无交易记录</td></tr>
            </g:if>
            <g:else>
                <g:each in="${rentList}">
                    <tr>
                        <td scope="row">${it[0]}</td>
                        <td scope="row">${it[1]}</td>
                        <td scope="row">${it[2]}</td>
                        <td scope="row">${it[3]}</td>
                        <td scope="row">${it[4]}</td>
                        <td scope="row">${it[5]}</td>
                        <td scope="row">${it[6]}</td>
                        <td scope="row">${it[7]}</td>
                        <td scope="row"><g:formatDate date="${it[8]}" format="yyyy-MM-dd"></g:formatDate></td>
                    </tr>
                </g:each>
            </g:else>


            </tbody>
        </table>
        </div>
    </div>
        %{--footer--}%
        <footer class="footerText">
            <section class="serverPhone">客服电话：400-077-0101</section>
            <section class="companyName">2017 © 北京国信达数据技术有限公司</section>
        </footer>


        %{--<!-- grails分页器 -->--}%
        %{--<div class="btn-group flex pagings">--}%
            %{--<g:paginate total="9999" params="${params}"/>--}%
            %{--<g:paginate total="${saleBuildCount?: 0}" params="${params}"/>--}%
        %{--</div>--}%
            %{--swiper.js--}%
            <asset:javascript src="intelligence/swiper.js"/>
            %{--初始化swiper.js--}%

    <script>
        var swiper = new Swiper('.swiper-container',{
            loop:true,
            autoplay:1000,
            slidesPerView: 1,
            spaceBetween: 30,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    </script>
    <script>
            $(".tabActive").click(function(){
                $(this).addClass("houseDealContentActive").siblings().removeClass("houseDealContentActive");
            })

        // 小区交易数据
        $(".tabActive").click(function(){
            var index = $(".tabActive").index(this)
            $(".dealTable").each(function () {
                if ($(".dealTable").index(this) == index)
                {
                    if ($(this).hasClass("hide"))
                    {
                        $(this).removeClass("hide")
                    }

                }
                else {
                    if (!$(this).hasClass("hide"))
                    {
                        $(this).addClass("hide")
                    }
                }
            })
        })


        // $(function () {
        //     // 分页器样式
        //     $(".pagings>a,.pagings>span").addClass("btn btn-secondary waves-effect");
        //     // 当前分页
        //     $(".currentStep").css({"background": "#2196F3", "color": "#fff", "border-color": "#2196F3"});

        //     $.ajax({
        //         type: "post",
        //         url: "/building/buildingTable",
        //         data: {
        //             buildingId: ${building?.id},
        //             communityId: ${building?.communityId}
        //         },
        //         success: function (data) {
        //             if (data.status == "success") {
        //                 console.log("data");
        //                 var buildTableList=data.buildTableList
        //                 var unitNameList=data.unitNameList
        //                 console.log("===="+unitNameList)
        //                 var communityId=data.communityId
        //                 console.log(buildTableList.length)
        //                 var length=buildTableList.length
        //                 if(length==0){
        //                     $(".dataTable").html("暂无数据")
        //                 }else {
        //                     var htm="<tr><td>单元</td>"
        //                     for (var i = 0; i < length; i++) {
        //                         for (key in buildTableList[i]) {
        //                             var aa=key.split("{");
        //                             var bb=aa[1].split("}")
        //                             var ss = bb[0].split("=");
        //                             var totalFloor=ss[1]
        //                             var valueLength=buildTableList[i][key].length
        //                             htm+="<td>"+ss[0]+"</td>"
        //                             for(var j=0;j<totalFloor;j++){
        //                                 htm+="<tr><td style='width:50px;'>"+(j+1)+"层</td>"
        //                                 for(var m=0;m<valueLength;m++){
        //                                     if(buildTableList[i][key][m][4]==(j+1)){
        //                                         htm+="<td><a href='/house/show?id="+buildTableList[i][key][m][0]+" &&communityId="+communityId+" '>"+buildTableList[i][key][m][3]+"</a></td>"
        //                                     }
        //                                 }
        //                                 htm+="</tr>"
        //                             }
        //                         }

        //                     }
        //                     htm+= "</tr>"
        //                     $(".dataTable").html(htm)
        //                 }
        //             }
        //         },
        //         error: function () {
        //             alert("获取失败，请稍后重试");
        //             //  swal("获取失败，请稍后重试", "", "error");
        //         }
        //     });
        // })

        $(function () {
            // 分页器样式
            $(".pagings>a,.pagings>span").addClass("btn btn-secondary waves-effect");
            // 当前分页
            $(".currentStep").css({"background": "#2196F3", "color": "#fff", "border-color": "#2196F3"});

            $.ajax({
                type: "post",
                url: "/building/buildingTable1",
                data: {
                    buildingId: ${building?.id},
                    communityId: ${building?.communityId}
                },
                success: function (data) {
                    if (data.status == "success") 
                    {
                        var buildTableList = data.buildTableList
                        var unitNameList = data.unitNameList
                        var communityId = data.communityId
                        var length = buildTableList.length
                        var totalfloor = data.totalfloor
                        console.log(data);
                        if(length==0)
                        {
                            $(".dataTable").html("暂无数据")
                        }
                        else 
                        {
                            console.log(unitNameList);

                            // 表头内容渲染
                            var htm = "<tr class='tableFontColor'><td class='fixWidth'>单元</td>"
                            for (var i = 0; i < unitNameList.length; i++)
                            {
                                htm += "<td colspan='" + unitNameList[i]["colspanNumber"] + "'>" + unitNameList[i]["unitName"] + "</td>"
                            }
                            htm+= "</tr>"

                            // 标题内容渲染
                            for (var j = 0; j < totalfloor; j++)
                            {
                                htm+= "<tr>"
                                htm+= "<td class='tableFontColor'>" + (j+1) + "层</td>"
                                for (var i = 0; i < unitNameList.length; i++)
                                {
                                    var colspan = unitNameList[i]["colspanNumber"]
                                    var count = 0
                                    for (var k = 0; k < buildTableList.length; k++)
                                    {
                                        if (buildTableList[k][6] == unitNameList[i]["unitName"] && buildTableList[k][4] == (j+1))
                                        {
                                            count++
                                            htm+="<td><a href='/house/show?id=" + buildTableList[k][0] + "&communityId=" + communityId + "' class=\'pageColor\'>" + buildTableList[k][3]+"</a></td>"
                                        }
                                    }

                                    for (var k = 0; k < colspan-count; k++)
                                    {
                                        htm+="<td style='background: #ccc;' '></td>"
                                    }
                                }
                                htm+= "</tr>"
                            }

                            $(".dataTable").html(htm)
                        }
                    }
                },
                error: function () {
                    alert("获取失败，请稍后重试");
                }
            });
        })
    </script>
</body>

</html>
